﻿@{
    ViewBag.Title = "树控件";
}

@section Style{
    @Styles.Render("~/Content/Flat/Css/tree")
}

@section Script{
    @Scripts.Render("~/Content/Flat/Js/tree")
<script>
      jQuery(document).ready(function() {
          TreeView.init();
      });
</script>
}
<!--main content start-->
<section id="main-content">
    <section class="wrapper site-min-height">

        <!-- BEGIN PAGE CONTENT-->
        <div class="row">

            <div class="col-md-6">
                <div class="panel">
                    <div class="panel-heading">
                        树状控件样式 #1
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div id="FlatTree" class="tree tree-plus-minus">
                            <div class="tree-folder" style="display:none;">
                                <div class="tree-folder-header">
                                    <i class="fa fa-folder"></i>
                                    <div class="tree-folder-name"></div>
                                </div>
                                <div class="tree-folder-content"></div>
                                <div class="tree-loader" style="display:none"></div>
                            </div>
                            <div class="tree-item" style="display:none;">
                                <i class="tree-dot"></i>
                                <div class="tree-item-name"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel">
                    <div class="panel-heading">
                        树状控件样式 #2
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div id="FlatTree2" class="tree">
                            <div class="tree-folder" style="display:none;">
                                <div class="tree-folder-header">
                                    <i class="fa fa-folder"></i>
                                    <div class="tree-folder-name"></div>
                                </div>
                                <div class="tree-folder-content"></div>
                                <div class="tree-loader" style="display:none"></div>
                            </div>
                            <div class="tree-item" style="display:none;">
                                <i class="tree-dot"></i>
                                <div class="tree-item-name"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel">
                    <div class="panel-heading">
                        树状控件样式 #3
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div id="FlatTree3" class="tree tree-plus-minus tree-solid-line tree-unselectable">
                            <div class="tree-folder" style="display:none;">
                                <div class="tree-folder-header">
                                    <i class="fa fa-folder"></i>
                                    <div class="tree-folder-name"></div>
                                </div>
                                <div class="tree-folder-content"></div>
                                <div class="tree-loader" style="display:none"></div>
                            </div>
                            <div class="tree-item" style="display:none;">
                                <i class="tree-dot"></i>
                                <div class="tree-item-name"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel">
                    <div class="panel-heading">
                        树状控件样式 #4
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div id="FlatTree4" class="tree tree-solid-line">
                            <div class="tree-folder" style="display:none;">
                                <div class="tree-folder-header">
                                    <i class="fa fa-folder"></i>
                                    <div class="tree-folder-name"></div>
                                </div>
                                <div class="tree-folder-content"></div>
                                <div class="tree-loader" style="display:none"></div>
                            </div>
                            <div class="tree-item" style="display:none;">
                                <i class="tree-dot"></i>
                                <div class="tree-item-name"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- END PAGE CONTENT-->
    </section>
</section>
<!--main content end-->